<template>
  <div class="con_left">
    <div style="line-height:20px;padding:20px 0 0 20px;font-size:16px;">
      用户组
      <img src="../../assets/展开选择.png" alt="">
      <div style="float: right;margin-right:10px;cursor: pointer;font-size: 20px " @click="dialogVisible1 = true">+</div>
    </div>
    <div style="line-height:20px;padding:20px 0 0 20px;font-size:14px;cursor: pointer" @click="getAllUser">
      <div style="text-indent: -15px;overflow: hidden;width: 15px;height: 15px;display: inline-block">
        <img src="../../assets/14.png" style="filter: drop-shadow(15px 0px #858585);" alt="">
      </div>
      全部成员

      <div style="float: right;margin-right:10px;;font-size: 14px ">{{num}}</div>
    </div>
    <div style="line-height:20px;padding:20px 0 0 20px;font-size:14px;cursor:pointer;" v-for="(item,index) in list" :key="index" @click="getlist1(item.name)">
      <div style="display: inline-block">
        <img src="../../assets/15.png"  alt="">
      </div>
      {{item.name}}
      <div style="float: right;margin-right:10px;;font-size: 14px ">{{item.num}}</div>
    </div>
  </div>
  <div class="con_right">
    <div style="margin: 20px">
      <el-button  style=" float: right;margin-right: 20px" type="primary" @click="dialogVisible  = true">邀请成员</el-button>
    </div>

    <el-table
        ref="multipleTableRef"
        :data="list1"
        style="width: 90%;margin: 80px auto"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户名" width="320">
        <template #default="scope">
          <div style="font-weight: 600">{{ scope.row.username }}</div>
          <div style="display: inline-block;color: #858585">{{scope.row.phone}}</div><div style="display: inline-block;margin-left: 20px;color:#858585">{{scope.row.email}}</div>
        </template>
      </el-table-column>
<!--      <el-table-column property="id" label="用户ID" width="120" />-->
      <el-table-column property="team" label="所属团队" show-overflow-tooltip />
      <el-table-column property="position" label="职位" show-overflow-tooltip />
      <el-table-column property="操作" label="操作" show-overflow-tooltip >
        <template #default="scope">
          <el-button link type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="total"

        @current-change="handleCurrentChange"
    />
    <div style="height: 50px"></div>
  </div>
  <el-dialog
      v-model="dialogVisible"
      title=""
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="80px">
      <el-form-item label="姓名" >
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="form.position" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属团队" >
        <el-select v-model="form.team" placeholder="">
<!--          <el-option label="Zone No.1" value="shanghai" />-->
          <el-option
              v-for="item in list2"

              :key="item.id"
              :label="item.name"
              :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户类型" >
        <el-select v-model="form.type" placeholder="">
          <!--          <el-option label="Zone No.1" value="shanghai" />-->
          <el-option
              v-for="item in list3"

              :key="item.id"
              :label="item.label"
              :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择报表" >
        <el-checkbox-group
            v-model="form.reportlist"
        >
          <el-checkbox v-for="(item,index) in list4" :key="index" :label="item.label">{{item.name}}</el-checkbox>
        </el-checkbox-group>

      </el-form-item>

    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible1"
      title="新建用户组"
      width="30%"
      :before-close="handleClose"
  >
    <el-form ref="ruleFormRef" :rules ="rules1" :model="form1" label-width="80px">
      <el-form-item label="名称" >
        <el-input v-model="form1.name" autocomplete="off" style="width: 300px" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addUserList(ruleFormRef)">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref,onMounted,reactive } from "vue"
import {userGetAllUser, userGetNum,userFindByList,userSaveTeam,userSaveUser} from "@/util/api";
import type { FormInstance, FormRules } from 'element-plus'
const num = ref(0)
const team = ref("")
const list:any = ref([])
const list2:any = ref([])
const list3:any = ref([{
  name:'填报人员',
  label:'1'
},{
  name:'审核人员',
  label:'2'
}])
const list4:any = ref([{
  name:'"四上"企业情况模板',
  label:'4'
},{
  name:'工业总产值分行业情况模板',
  label:'6'
},{
  name:'重点工业产品产量情况模板',
  label:'7'
},{
  name:'主导产品产量情况模板',
  label:'5'
},{
  name:'月报模板',
  label:'1'
},{
  name:'季报模板',
  label:'2'
},{
  name:'年报模板',
  label:'3'
}])
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const list1:any = ref([])
const total = ref(10)
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const ruleFormRef = ref<FormInstance>()

import { ElTable,ElMessageBox  } from 'element-plus'
const form = reactive({
  username:'',
  phone:'',
  email:'',
  position:'',
  team:'',
  type:'',
  reports:'',
  reportlist:[]
})
const form1 = reactive({

  name:''
})
interface User {
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const rules1 = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur',
    },
  ],
})

const addUserList= async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      userSaveTeam(form1).then((res)=>{
        dialogVisible1.value = false
        getuserNum()
      })
      alert(1)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const saveUser = () =>{
  form.reports = form.reportlist.join(",")
  userSaveUser(form).then((res)=>{
    dialogVisible.value = false
    getlist()
  })
}

onMounted(() => {
  getuserNum()
  getlist()
})


const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭弹窗?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}


//分页
const handleCurrentChange = (val: number) => {
  getlist()
}
const getlist1 = (val:any) => {
  team.value = val
 getlist()
}


const getAllUser = () =>{
  team.value = ""
  getlist()
}

const getlist = () => {
  let data1:any = {
    team:team.value,
    page:currentPage.value,
    pageSize:10
  }
  userFindByList(data1).then((res:any)=>{
    // console.log(res)
    list1.value = res.data.content
    total.value = res.data.totalElements
    // num.value = res.data.totalElements
    // console.log(list1)
  })
}
const getuserNum = () => {
 let data:any = ''
  userGetNum(data).then((res:any)=>{
    list.value = res.data
    list2.value = res.data
    let list4 = list2.value
    let list1 = list.value
    for (let i=0;i<list1.length;i++){
      if(list1[i].name == "全部成员"){
        num.value = list1[i].num
        list1.splice(i,1)
      }
    }
    for (let i=0;i<list4.length;i++){
      if(list4[i].name == "全部成员"){
        list4.splice(i,1)
      }
      // if(list4[i].name == "未分组"){
      //   list4.splice(i,1)
      // }
    }
  })

}

</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
:deep.el-pagination{
  float: right;
  margin-right: 20px;
}
.con_left{
  width: 13%;
  height: 95vh;
  background: #f5f5f5;
  display: inline-block;
  vertical-align: middle;
  color: #858585;
  box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.06);
}
.con_right{
  width: 87%;
  height: 95vh;
  background: #fff;
  vertical-align: middle;
  display: inline-block;
}
</style>
